<template>
  <div>
    <div class="nav"
         :style="styleObj">
      <van-icon name="arrow-left"
                :style="iconStyle"></van-icon>
      <div class="nav_info">
        <ul v-show="ulflag">
          <li :class="index===navIndex?'active':''"
              v-for="(item,index) in navList"
              :key="index"
              @click="turnFloor(index)">{{item}}</li>
        </ul>
      </div>
      <van-icon :style="iconStyle"
                name="ellipsis"></van-icon>
    </div>
    <!-- banner部分 -->
    <div class="info_banner">
      <van-swipe>
        <van-swipe-item v-for="(item,index) in infoData.image"
                        :key="index">
          <img :src="item">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品信息部分 -->
    <div class="info_content">
      <div>
        <span>￥{{infoData.price}}</span>
        <van-icon name="goods-collect-o"></van-icon>
      </div>
      <p class="pname">{{infoData.goods_name}}</p>
    </div>
    <!-- 推荐部分 -->
    <div class="rec_title"
         ref="likeEle">猜你喜欢</div>
    <div class="recommed_wrap">
      <div class="list_one"
           v-for="(item,index) in infoData.recommend"
           :key="index">
        <img :src="item.image">
        <p>{{item.goods_name}}</p>
        <div>￥{{item.price}}</div>
      </div>
    </div>
    <!-- 详情部分 -->
    <div class="rec_title"
         ref="infoEle">详情部分</div>
    <div class="img_wrap">
      <h1>{{infoData.detail.title}}</h1>
      <div v-html="infoData.detail.in_detail"></div>
    </div>
    <!-- 脚步 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o"
                             text="客服"
                             dot />
      <van-goods-action-icon icon="cart-o"
                             text="购物车"
                             :badge="num" />
      <van-goods-action-icon icon="shop-o"
                             text="店铺"
                             badge="12" />
      <van-goods-action-button type="warning"
                               text="加入购物车"
                               @click="skushow=true" />
      <van-goods-action-button type="danger"
                               text="立即购买" />
    </van-goods-action>
    <!-- 规格弹出层 -->
    <van-sku v-model="skushow"
             :sku="sku"
             :goods="goods"
             :goods-id="goodsId"
             :quota="quota"
             @buy-clicked="onBuyClicked"
             @add-cart="onAddCartClicked" />
  </div>
</template>
<script>
import { addCarApi } from '../../api/cart'
import { getInfoApi } from '../../api/info'
import { mapActions, mapGetters } from 'vuex';

export default {
  data () {
    return {
      navList: [
        "商品",
        "评价",
        "详情",
        "推荐"
      ],
      navIndex: 0,
      skushow: false,
      goodsId: "",//商品id
      quota: 100,//限购数量
      sku: {
        //放置规格数据
        // 数据结构见下方文档
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [

        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [

        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
        picture: ""
      },
      gid: "",
      styleObj: {
        background: "rgba(255,255,255,0)",
        "border-bottom": "1px solid transparent"
      },
      ulflag: false,
      iconStyle: {
        background: "rgba(0,0,0,0.5)",
        color: "white"
      },
      infoData: {},//详情数据
      infoOffsetTop: 0,
      likeOffsetTop: 0,
      shopid: "",
    }
  },
  computed: {
    ...mapGetters("cartStore", ["num"])
  },
  created () {

    // 获取距离页面顶部的偏移量
    this.$nextTick(() => {
      this.infoOffsetTop = this.$refs.infoEle.offsetTop - 40;
      this.likeOffsetTop = this.$refs.likeEle.offsetTop - 40;
    })
    // 接收到商品id
    this.goodsId = this.$route.query.gid;
    this.gid = this.$route.query.gid;
    getInfoApi(this.gid).then(res => {
      console.log(res)
      this.infoData = res.data;//
      this.goods.picture = res.data.image[0];//赋值goods中数据
      this.sku.price = res.data.price;//赋值默认价格
      console.log(this.sku.list[0])
      this.sku.list[0].price = res.data.price * 100;
      this.shopid = res.data.storeInfo.store_id;//商店id
      // 处理attr 数据  res.data.attr 
      const attr = []
      res.data.attr.forEach((element, ind) => {
        var val = element.attr_values.split(",");//["21号","22号"]
        // 整理v的数组
        var myval = val.map((ele, index) => {
          return {
            id: "1000" + index,
            name: ele
          }
        })
        console.log(myval)
        attr.push({
          k: element.attr_name,
          k_s: "s" + (ind + 1),
          v: myval
        })
      });
      this.sku.tree = attr;
      console.log(attr)
    })
  },
  methods: {
    ...mapActions("cartStore", ["getCartNumAction"]),
    turnFloor (index) { //跳转楼层
      this.navIndex = index;
      var body = document.documentElement || document.body;
      if (index == 0) {
        body.scrollTop = 0;
      } else if (index == 2) {
        body.scrollTop = this.infoOffsetTop;
      } else if (index == 3) {
        body.scrollTop = this.likeOffsetTop;
      }
    },
    onBuyClicked () { },
    async onAddCartClicked (item) {
      console.log(item)
      var res = await addCarApi({
        user_id: "956519",//用户id
        shop_id: this.shopid,//商店id 
        goods_id: item.goodsId,//商品id
        goods_num: item.selectedNum,//选择数量
        sku_id: 0,
        active_type: 0
      })
      console.log(res)
      this.$toast("加入购物车成功")
      this.skushow = false;
      this.getCartNumAction()
    },
    scrollHander () {  //滚动事件的事件函数

      //  获取页面的滚动距离
      var top = document.documentElement.scrollTop || document.body.scrollTop;


      // 400 * 0.0025
      this.styleObj.background = "rgba(255,255,255," + top * 0.0025 + ")";
      if (top > 400) {
        this.ulflag = true;
        // this.iconStyle.color = "black"
        this.$set(this.iconStyle, "color", "black")
        this.$set(this.iconStyle, "background", "rgba(255,255,255,1)")
        this.$set(this.styleObj, "border-bottom", "1px solid #ccc")
      } else {
        this.ulflag = false;
        // this.iconStyle.color = "black"
        this.$set(this.iconStyle, "color", "white")
        this.$set(this.iconStyle, "background", "rgba(0,0,0,0.5)")
        this.$set(this.styleObj, "border-bottom", "1px solid transparent")
      }
      console.log(this)
      console.log(this.likeOffsetTop)
      // 滚动过程中判断位置 改变激活下标
      if (top > this.likeOffsetTop) {
        this.navIndex = 3
      } else if (top > this.infoOffsetTop) {
        this.navIndex = 2;
      } else {
        this.navIndex = 0;
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.scrollHander, true)

    })
  },
  beforeDestroy () {
    // 离开组件 解绑当前滚动事件
    window.removeEventListener("scroll", this.scrollHander, true)
  },
  destroyed () {

  },

}
</script>
<style lang="less">
.nav {
  width: 100%;
  height: 88px;
  line-height: 88px;
  font-size: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: space-around;

  .nav_info {
    flex: 1;
    ul {
      display: flex;
      justify-content: space-around;
      .active {
        border-bottom: 8px solid red;
      }
    }
  }
  .van-icon {
    font-size: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
  }
}
.info_banner {
  height: 750px;
  width: 100%;
  img {
    height: 750px;
    width: 100%;
  }
}
.info_content {
  width: 100%;
  height: 200px;
  background: white;
  margin: 20px 0;
  > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30px 30px;
    box-sizing: border-box;

    span {
      color: red;
      font-size: 30px;
    }
    .van-icon {
      font-size: 35px;
    }
  }
  .pname {
    height: 80px;
    padding: 0 30px;
    line-height: 40px;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
.rec_title {
  width: 100%;
  height: 80px;
  line-height: 80px;
  color: red;
  font-size: 30px;
  margin: 20px 0;
}
.recommed_wrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .list_one {
    width: 45%;
    height: 400px;
    margin-top: 10px;
    img {
      width: 100%;
      height: 300px;
    }
    p {
      height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      font-size: 20px;
    }
    div {
      font-size: 20px;
      color: red;
    }
  }
}
.img_wrap {
  h1 {
    text-align: center;
    font-size: 30px;
  }
  div {
    img {
      width: 100%;
    }
  }
}
</style>